<script setup>
import {inject} from "vue"
import DesignerElementBox from "../Layout/DesignerElementBox.vue"
import TableColumn1 from "./TableColumn1.vue";

const props = defineProps({
    elem: {
        type: Object,
        default: () => {
            return {
                styleConfig: {},
                dataConfig: {}
            }
        }
    }
})
const emits = defineEmits(["active", "remove"])
const activeElementId = inject("activeElementId")


</script>

<template>
    <div :style="elem.styleConfig" class="TableList1" @click.stop="emits('active', elem)">
        <DesignerElementBox :is-active="activeElementId === elem.id" @remove="emits('remove', elem)" />
        <table class="table">
            <tbody>
                <tr>
                    <TableColumn1 v-for="(column, j) in elem.children" :key="j" :elem="column" :table="elem" @active="el => emits('active', el)" />
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style lang="scss">
.TableList1 {
    position: relative;

    table {
        width: 100%;
        border-collapse: collapse;

        th, td {
            border: 1px solid transparent;
        }
    }
}
</style>